<template>
  <view>
    <view class="home-module__nav" :style="[topStyle]">
      <scroll-view
        class="home-module__nav-view"
        scroll-x="true"
        :scroll-left="scrollLeft"
        scroll-with-animation="true"
        @scroll="onScroll"
      >
        <view class="home-module__nav-list">
          <view class="item">
            <view class="text" @click="clickitem(0)">精选</view>
            <view :style="[bgStyle]" class="active" v-show="current == 0"></view>
          </view>
          <view class="item" v-for="item in navList" :key="item.value">
            <view class="text u-line-1" @click="clickitem(item.value)">{{ item.label }}</view>
            <view :style="[bgStyle]" class="active" v-show="current == item.value"></view>
          </view>
        </view>
      </scroll-view>
      <u-icon class="home-module__nav-menu" name="list" @click="onCategoryOpen"></u-icon>
    </view>
    <!-- 解决fixed定位后导航栏塌陷的问题 -->
    <view class="feed-sliding-inner-placeholder"></view>

    <u-popup v-model="show" mode="right" width="100%">
      <u-navbar title="选择分类" :custom-back="onCategoryClose"></u-navbar>
      <view class="home-module__category">
        <div class="home-module__category-view">
          <view class="category-title">已选分类</view>
          <view class="category-list">
            <view
              v-for="item in selectedList"
              :key="item.value"
              class="view active"
              :style="[
                {
                  background: $edu.test.hexToRgba(globPrimaryColor, 4),
                },
              ]"
              @click="handleDel(item.value)"
            >
              <view class="item u-line-1">{{ item.label }}</view>
              <u-icon class="icon" name="close-circle-fill" :color="globPrimaryColor"></u-icon>
            </view>
          </view>
        </div>
        <div class="home-module__category-view">
          <view class="category-title">未选分类</view>
          <view class="category-list">
            <view
              v-for="item in categoryList"
              :key="item.value"
              class="view"
              @click="handleAdd(item)"
            >
              <view class="item u-line-1">{{ item.label }}</view>
              <u-icon class="icon" name="plus-circle-fill" color="#B7BAC1"></u-icon>
            </view>
          </view>
        </div>
        <view class="home-module__category-btn" :style="[bgStyle]" @click="hamdleSubmit"
          >选好了</view
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { storage } from '@/utils/storage'
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      feedWidthItem: [],
      current: 0,
      scrollLeft: 0,
      old: {
        scrollLeft: 0,
      },
      show: false,
      selectedList: [],
      navList: [],
    }
  },
  computed: {
    ...mapGetters({
      globWindowWidth: 'projectSetting/globWindowWidth',
      navbarHeight: 'projectSetting/globNavbarHeight',
      statusBarHeight: 'projectSetting/globStatusBarHeight',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
    feedStyle() {
      let style = {}
      Object.assign(style, this.background)
      return style
    },
    topStyle() {
      let style = {}
      style.top = this.navbarHeight + this.statusBarHeight + 'px'
      return style
    },
    bgStyle() {
      let style = {}
      style.background = this.globPrimaryColor
      return style
    },
    categoryList() {
      let list = this.list
      let selected = this.selectedList
      return list.filter((page) => selected.every((item) => item.value != page.value))
    },
  },
  mounted() {
    let status = storage.get('edu-home-module-nav-status', 0)
    if (status == 1) {
      this.navList = storage.get('edu-home-module-nav-list', [])
    } else {
      this.navList = this.list
      this.selectedList = this.list
      storage.set('edu-home-module-nav-status', 1)
      storage.set('edu-home-module-nav-list', this.selectedList)
    }
    setTimeout(() => {
      this.getElRectAll()
    }, 500)
  },
  methods: {
    // 点一级
    clickitem(value) {
      if (this.current == value) return
      this.current = value
      if (this.current != 0) {
        this.getScrollLeft()
      }
      this.$emit('click', this.current)
    },
    getScrollLeft() {
      let index = this.navList.findIndex((item) => item.value == this.current)
      this.scrollLeft = this.old.scrollLeft
      this.$nextTick(() => {
        this.scrollLeft =
          this.feedWidthItem[index].left -
          this.globWindowWidth / 2 +
          this.feedWidthItem[index].width / 2 +
          55
      })
    },
    onScroll(e) {
      this.old.scrollLeft = e.detail.scrollLeft
    },
    onCategoryOpen() {
      this.selectedList = storage.get('edu-home-module-nav-list', [])
      this.show = true
    },
    onCategoryClose() {
      this.show = false
    },
    handleDel(val) {
      let index = this.selectedList.findIndex((item) => item.value == val)
      if (index != -1) {
        this.selectedList.splice(index, 1)
      }
    },
    handleAdd(item) {
      this.selectedList.push(item)
    },
    hamdleSubmit() {
      this.navList = this.selectedList
      storage.set('edu-home-module-nav-status', 1)
      storage.set('edu-home-module-nav-list', this.selectedList)
      let item = this.navList.find((item) => item.value == this.current)
      if (this.$edu.test.isUndef(item) && this.current != 0) {
        this.current = 0
        this.$emit('click', this.current)
      }
      setTimeout(() => {
        this.getElRectAll()
        this.onCategoryClose()
      }, 200)
    },
    // 获取一个item目标元素的宽度
    getElRectAll() {
      const query = uni.createSelectorQuery().in(this)
      query
        .selectAll('.home-module__nav-list .item')
        .boundingClientRect((res) => {
          // 如果节点尚未生成，res值为null，循环调用执行
          if (!res) {
            setTimeout(() => {
              this.getElRectAll()
            }, 10)
            return
          }
          this.feedWidthItem = res
        })
        .exec()
    },
  },
}
</script>

<style lang="scss" scoped>
.home-module__nav {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 991;
  padding-left: 8rpx;
  padding-right: 86rpx;
  background: #ffffff;
  &-view {
    white-space: nowrap;
  }
  &-list {
    display: flex;
    height: 110rpx;
    .item {
      position: relative;
      padding: 0 24rpx;
      .text {
        max-width: 240rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #303133;
        line-height: 84rpx;
      }
      .active {
        position: absolute;
        left: 50%;
        bottom: 10px;
        z-index: 10;
        transform: translateX(-50%);
        width: 40rpx;
        height: 8rpx;
        border-radius: 4rpx;
      }
    }
  }
  &-menu {
    position: absolute;
    right: 30rpx;
    top: 24rpx;
    color: #303133;
    font-size: 40rpx;
  }
}
.feed-sliding-inner-placeholder {
  width: 100%;
  height: 110rpx;
}
.home-module__category {
  margin-top: 46rpx;
  &-view {
    margin-bottom: 64rpx;
    .category-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
      line-height: 42rpx;
      padding: 0 30rpx;
    }
    .category-list {
      display: flex;
      flex-wrap: wrap;
      padding-left: 30rpx;
      .view {
        position: relative;
        background: #f4f4f4;
        border-radius: 35rpx;
        margin-right: 40rpx;
        margin-top: 48rpx;
        padding: 16rpx 28rpx;
        .item {
          max-width: 620rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
          line-height: 40rpx;
        }
        .icon {
          position: absolute;
          top: 4rpx;
          right: 2rpx;
        }
        &.active {
          @include text-color();
          .item {
            @include text-color();
          }
        }
      }
    }
  }
  &-btn {
    position: fixed;
    left: 50%;
    margin-left: -100rpx;
    bottom: 100rpx;
    width: 202rpx;
    height: 64rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 64rpx;
    text-align: center;
    border-radius: 32rpx;
  }
}
</style>
